<template>
	<view class="count">
		<map :style="{'height':mapHeight+'px'}" class="map" :scale="16" :min-scale="10" :latitude="latitude" :longitude="longitude"
			:markers="markers">
			<cover-view class="user-inlet index-inlet" @click.stop="jump('/pages/user/personal_center')">
				<cover-image src="@/static/image/index/profile@2x.png" @click.stop="jump('/pages/user/personal_center')"/>
			</cover-view>
			<cover-view class="location-inlet index-inlet" @click.stop="getLocation">
				<cover-image src="@/static/image/index/getSite@2x.png" @click.stop="getLocation"/>
			</cover-view>
			<cover-view class="message-inlet index-inlet" @click.stop="jump('/pages/home_page/message')">
				<cover-image src="@/static/image/index/message@2x.png" @click.stop="jump('/pages/home_page/message')"/>
			</cover-view>
		</map>
		<view class="serveList">
			<view class="card">
				<template v-if="tabBarDex==0">
					<u-tabs :is-scroll="false" active-color="#343434" inactive-color="#4a4a4a" :current="curTab"
						:list="tabsList" @change="changeTab" />
				</template>
				<template v-else>
					<scroll-view :scroll-x="true" class="select-car">
						<view class="car u-font-26 u-bg-gray u-p-20 sel-car" v-for="(item,index) in carTypeArr" :key="index" @click="jump('/pages/order/car_information',{index})">
							<view class="left u-flex">
								<image :src="item.img" mode="widthFix"/>
								<text>{{item.title}}</text>
							</view>
							<view class="right u-flex u-col-top u-m-l-15">
								<text>载重:{{item.load}}</text>
								<text>长宽高:{{item.three_high}}</text>
								<text>体积:{{item.volume}}</text>
							</view>
						</view>
					</scroll-view>
				</template>
				<template v-if="curTab==0 || curTab==1 || tabBarDex==1">
					<view class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #ccc;"  @click="jump('/pages/user/my_address')">
						<view class="icon u-font-white u-bg-grey">发</view>
						<text>请填写发货地址</text>
					</view>
					<view class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #ccc;" @click="jump('/pages/user/my_address')">
						<view class="icon u-font-white u-bg-red">收</view>
						<text>请填写收货地址</text>
					</view>
				</template>
				<!-- 帮买 -->
				<template v-if="curTab == 2 && tabBarDex==0 ">
					<view class="u-flex u-row-between helpBuy" >
						<view class="u-flex-1" v-for="(item, index) in helpBuyArr" :key="index" @tap="helpBuy(item.text)" >
							<image style="width: 50rpx;height: 50rpx;" :src="item.src"></image>
							<view class="menu-tit">{{ item.text }}</view>
						</view>
						<u-button ripple shape="circle" @click="jump('/pages/home_page/submit_orders',{type:4})"
						style="background-color: rgb(42,90,164);color: #fff;">下单</u-button>
					</view>
				</template>
				
			</view>
			<view class="card u-m-t-20">
				<view class="u-flex">
					<block v-for="(item, index) in tabBar" :key="index" >
						<view class="tabbar u-flex u-flex-1" @tap="tabTap(index)">
							<text class="u-font-28" :class="tabBarDex == index?'sel-tab':''">{{ item.tit }}</text>
							<text>{{ item.subTit }}</text>
							<image v-if="tabBarDex == index" class="tabItem-icon" :src="item.src2"></image>
							<image v-else class="tabItem-icon" :src="item.src1"></image>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapHeight: '', //地图高度
				latitude: 27.088377, //中心纬度
				longitude: 114.971879, //中心经度
				markers: [ //标记点
					{
						id: 1,
						latitude: 27.088377,
						longitude: 114.971879,
						iconPath: require('@/static/image/location@3x.png')
					}
				],
				curTab: 0, //当前选中的服务类型tabs 默认为搬送
				tabsList: [{
						name: '帮送'
					},
					{
						name: '帮取'
					},
					{
						name: '帮买'
					},
					{
						name: '帮排队'
					},
					{
						name: '闪帮'
					},
					{
						name: '···'
					},
				],
				helpBuyArr: [{
						text: '早餐',
						src: require('@/static/image/index/menu1.png')
					},
					{
						text: '咖啡',
						src: require('@/static/image/index/menu2.png')
					},
					{
						text: '药品',
						src: require('@/static/image/index/menu3.png')
					},
					{
						text: '饮料',
						src: require('@/static/image/index/menu4.png')
					},
					{
						text: '其他',
						src: require('@/static/image/index/more.png')
					}
				],
				tabBarDex: 0, //当前底部tabbar选中  默认为0-跑腿
				tabBar: [{
						tit: '跑腿',
						subTit: 'Errands',
						src1: require('@/static/image/index/icon1-1.png'),
						src2: require('@/static/image/index/icon1-2.png')
					},
					{
						tit: '同城速运',
						subTit: 'City Express',
						src1: require('@/static/image/index/icon2-1.png'),
						src2: require('@/static/image/index/icon2-2.png')
					},
					{
						tit: '服务到家',
						subTit: 'Home Service',
						src1: require('@/static/image/index/icon3-1.png'),
						src2: require('@/static/image/index/icon3-2.png')
					}
				],
				carTypeArr:[
					{
						img:require('@/static/image/index/car1-2.png'),
						title:'三轮车',
						load:'500公斤',
						three_high:'2x1.4x0.45米',
						volume:'1.4方'
					},{
						img:require('@/static/image/index/car2-1.png'),
						title:'小面包车',
						load:'500公斤',
						three_high:'1.8x1.3x1.1米',
						volume:'2.6方'
					},{
						img:require('@/static/image/index/car2-2.png'),
						title:'中面包车',
						load:'1吨',
						three_high:'2.7x1.4x1.2米',
						volume:'4.5方'
					},{
						img:require('@/static/image/index/car3-1.png'),
						title:'小货车',
						load:'1.5吨',
						three_high:'2.7x1.5x1.7米',
						volume:'6.9方'
					},{
						img:require('@/static/image/index/car3-2.png'),
						title:'中货车',
						load:'1.8吨',
						three_high:'4.2x1.8x1.8米',
						volume:'13.6方'
					},
				]
			};
		},
		onShow() {},
		onLoad(options) {
			this.getLocation()
		},
		onReady() {
			this.getRect()
		},
		methods: {
			async getRect() {
				// 获取地图高度
				const {height}  = await this.$u.getRect('.serveList');
				this.mapHeight = this.$u.sys().windowHeight - height
			},
			// 获取当前位置
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						that.latitude = res.latitude,
						that.longitude = res.longitude,
						that.markers = [{
							iconPath: require('@/static/image/location@3x.png'),
							id: 0,
							latitude: res.latitude,
							longitude: res.longitude,
						}]
					}
				});
			},
			// 切换服务类型
			changeTab(i) {
				if(i==3){
					this.jump('/pages/home_page/submit_orders',{type:2})
					return;
				}else if(i==4){
					this.jump('/pages/home_page/submit_orders',{type:1})
					return;
				}else if(i==5){
					this.jump('/pages/home_page/business')
					return;
				}
				this.curTab = i
				this.$nextTick(()=>{
					this.getRect()
				})
			},
			// 点击了帮买
			helpBuy(helpbuy){
				this.jump('/pages/home_page/submit_orders',{type:4,helpbuy})
			},
			// 切换底部tabbar
			tabTap(i) {
				if (this.tabBarDex == i) return;
				if(i==2){
					this.jump('/pages/home_page/service_home')
					return;
				}
				this.tabBarDex = i
				this.$nextTick(()=>{
					this.getRect()
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.map {
		width: 100vw;

		.index-inlet {
			position: relative;
			width: 80rpx;
			height: 80rpx;
			margin-top: 20rpx;
			background: white;
			box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.35);
			border-radius: 10rpx;
		}

		.index-inlet cover-image {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 44rpx;
			height: 44rpx;
		}

		.user-inlet {
			float: left;
			margin-left: 20rpx;
		}

		.location-inlet {
			float: right;
			margin-right: 20rpx;
		}

		.message-inlet {
			float: right;
			margin-top: 120rpx;
			margin-right: -80rpx;
		}
	}

	.serveList {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 20rpx 20rpx 20rpx;
		.icon {
			border-radius: 100%;
			font-size: 24rpx;
			padding: 5rpx 10rpx;
			text-align: center;
		}
		.helpBuy{
			padding: 40rpx;
		}
		.select-car{
			white-space: nowrap;
			.car{
				display: inline-block;
				border-radius: 10rpx;
				margin: 20rpx;
				.left{
					float: left;
				}
				.right{
					float: right;
				}
				.left,.right{
					flex-direction: column;
					image{
						width: 80rpx;
					}
				}
			}
			.sel-car{
				border: 1rpx solid red;
			}
		}
		.tabbar {
			flex-direction: column;
			.tabItem-icon {
				width: 60rpx;
				height: 60rpx;
			}

			.sel-tab {
				font-weight: 550;
			}
		}
	}
</style>
